<template>
  <div class="loginContent"> 
          <el-row> 
             <el-col :span="16"> 
                <div>
                   <img src="../../assets/login.svg" alt="">
                </div>
             </el-col>
             <el-col :span="8">
                  <div class="login_from">
                       <div class="logo">
                           <strong class="enter-x-r">工作帮</strong>
                           <em class="enter-x-r">每个人的工作平台！</em>
                       </div>
                       <div class="cellitem enter-x-r login_from_name">
                            <div
                            :class="[
                         nameError?'error':''
                       ]"
                            ><input 
                            @input="nameInput"
                            placeholder="请输入用户名"
                            v-model="name" maxlength="10" type="text"/></div>
                            <div :class="{
                              active:nameError
                            }">{{nameError}}</div>
                       </div>
                       <div  
                       class="cellitem enter-x-r login_from_psd"
                       >
                            <div
                             :class="[
                          psdError?'error':''
                       ]"
                            ><input
                            @input="psdInput"
                            maxlength="12"
                            placeholder="请输入密码"
                            v-model="psd"  type="password"/></div>
                             <div :class="{
                              active:psdError
                            }">{{psdError}}</div>
                       </div>
                       <div class="login_from_test enter-x-r">
                             <span>忘记密码</span><span>其他登录方式</span>
                       </div>
                         <div class="login_from_btn enter-x-r">
                            <button @click="logins">登录</button>
                       </div>
                        <div class="login_from_allow enter-x-r">
                            <div class="dots">
                               <div class="items"></div>
                            </div>
                            <div>请同意用户隐私条约</div>
                       </div>
                  </div>
             </el-col>
          </el-row>
  </div>
  <!--  <button @click="logins">logins</button> -->
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs,ref} from 'vue'; 
import { useStore } from "vuex";
import {key} from '@/store/index';
import {useRouter} from 'vue-router'
type NPType = Boolean | string | null;
interface RolType  {
   reg:RegExp,
   require:Boolean,
   allow:Boolean
}
export default defineComponent({
    name:'LOGIN',
    setup(){
      const store = useStore(key); 
      const router = useRouter();
      const froms = reactive<{name:string,psd:string}>({
           name:'',
           psd:''
      })
      const errors = reactive<{nameError:NPType,psdError:NPType}>({
           nameError:null,
           psdError:null
      })
      // 注册
      const toRegister = ()=>{
          router.push('/register')
      }
      const vailte = {
            name:{
                 reg:/^[a-zA-Z0-9]{10}$/,
                 require:true,
                 allow:true,
            },
            psd:{
                 reg:/^[a-zA-Z0-9]{12}$/,
                 require:true,
                 allow:true,
            }
      } as {name:RolType,psd:RolType};
      const nameInput = ()=>{ 
           vailte.name.allow=true;   
           errors.nameError=null;
           console.log('aaa')
      }
      const psdInput = ()=>{ 
         vailte.psd.allow=true;
         errors.psdError=null;
      }
      const logins = ()=>{ 
          if(vailte.name.require && froms.name.length<1){
                errors.nameError = '用户名不能为空'; 
                vailte.name.allow=false;
        }else if(!vailte.name.reg.test(froms.name)){
                errors.nameError = '用户名格式有误'; 
                vailte.name.allow=false;
        }
          if(vailte.psd.require && froms.psd.length<1){
                errors.psdError = '密码不能为空'; 
                vailte.psd.allow=false;
        }else if(!vailte.psd.reg.test(froms.psd)){
                errors.psdError = '密码格式有误'; 
                vailte.psd.allow=false;
        } 
         if(vailte.name.allow && vailte.psd.allow){
          if(froms.name=='admin12345'){
                 store.dispatch('CREATE_ROUTER','super')
          }else{
                 store.dispatch('CREATE_ROUTER','test')
          }   
        }
        //    
      }
      return {
           logins,
           nameInput,
           psdInput,
           toRegister,
           ...toRefs(froms),
           ...toRefs(errors) 
      }
    }
})  
</script>

<style lang="scss" scoped>
.gridCon{
width: 100%;
height: 90vh;
position: relative;
// background: rgb(245, 242, 242);
padding: 1rem;
box-sizing: border-box;
display: flex;
align-items: center;
.inner{
    width: inherit;
    height: 75%; 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    &>div{
          flex-basis: 160px;
          backdrop-filter: blur(10px);
          border-radius: 8px; 
          background: rgba(255,255,255,.05);
          box-shadow: 0 0 10px rgba(0,0,0,0.25);
          margin: .5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          &>div:nth-of-type(1){
             font-weight: bold;
             font-size: 1.5rem;
             &+div{
              margin: .5rem 0;
                &+div{
                   font-size: .8rem;
                   color: #666;
                }
             }
          }
    }
}
 .circle {
width: 80px;
height: 80px;
background: radial-gradient(#53ef7d, #53ef7d);
border-radius: 50%;
position: absolute;
animation: move-up6 2s ease-in infinite alternate-reverse;
}
.circle:nth-child(1) {
top:  75%;
left: 16%;
 background: radial-gradient(#3348e6, #4d67fa);
}

.circle:nth-child(2) {
bottom: 334px;
right: 404px;
 background: radial-gradient(#33e68a, #4dfa8f);
animation-name: move-down1;
}
.circle:nth-child(3) {
bottom: 113px;
right: 180px;
animation-name: move-down1;
background: radial-gradient(#e63381, #e63381);
}
.circle:nth-child(4) {
top: 30%;
right: 130px;
animation-name: move-down1;
}
.circle:nth-child(5) {
top: 45%;
left: 130px;
width:  50px;
height: 50px;
background: radial-gradient(#d872b1, #d872b1);
animation-name: move-down1;
}
@keyframes move-up6 {
to {
  transform: translateY(-10px);
}
}

@keyframes move-down1 {
to {
  transform: translateY(10px);
}
}
}

.loginhead{
  height: 10vh;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
  display: flex;
  &>div:nth-of-type(1){
    width: 200px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    &+div{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &>div:nth-of-type(1){
             display: flex;
             align-items: center;
             height: 100%;
             &>div{
                 margin: 0 .5rem;
                 cursor: pointer;
                 position: relative;
                 height: 100%; 
                 display: flex;
               
                 align-items: center;
                 font-size: .9rem;
                 
                 &:hover{
                     &>div{
                        visibility: visible;
                        opacity: 1;
                        margin: 0;
                        
                     }
                     &>span{
                        transform: rotate(90deg);
                     }
                 }
                 &>span{
                   transition: all .2s ease-in-out 0s;
                 }
                 &>div{
                    backdrop-filter: blur(10px);
                     position: absolute;
                     z-index: 999999;
                     top: 10.3vh;
                     left: -10px;
                     visibility: hidden;
                     opacity: 0;
                     margin-top: .3rem;
                     transition: all .3s ease-in 0s;
                     background: #fff;
                     width: 40vw;
                     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 3px rgba(0, 0, 0, .04);
                     display: flex;
                       flex-direction: column;
                    &>div{
                       display: flex;
                       align-items: center;
                       margin: 1rem 0;
                       &>span{
                         display: inline-block; 
                         &:nth-of-type(1){
                           color: #007fff;
                           font-size: .8rem;
                           padding:0 1rem;
                           border-right: 1px solid #ccc;
                         }
                         &:not(:nth-of-type(1)){
                           font-size: .8rem;
                           padding:0 1rem;
                            color: #666;
                         }
                       }
                     }
                 }
             }
             &+div{
                 display: flex;
                 padding: 0 1.5rem ;
                 align-items: center;
                 &>div{
                  cursor: pointer;
                   &:hover{
                     color: #007fff !important; 
                   }
                   &:nth-of-type(1){
                      // background: #007fff;
                      // border-radius: 30px;
                      // padding: .2rem .8rem;
                      // color: #fff;
                      // font-size: .8rem;
                      // margin: 0 .5rem; 
                          color: #666;
                          padding: 2rem;
                      &+div{ 
                          color: #666;
                          padding:0 2rem;
                          border-left: 1px solid rgb(195, 194, 194);
                      }
                 }
                 }
             }
        }
    }
  }
}
.logo{
  display: flex;
  flex-direction: column;
  margin: 1rem 0;
  strong{
    font-size: 1.5rem;
  }
  em{
     font-size: .8rem;
  }
}
.loginContent{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
 .login_from{
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 20% 0;
   width: 70%;
      .items{
          position: absolute;
          width: 7px;
          height: 7px;
          background: #47a0fa;
          border-radius: 50%;
          }
   &_allow{
      display: flex;
      align-items: center;
      margin-top: 1rem;
      .dots{
          width: 7px;
          height: 7px;
          border: 1px solid #007fff !important;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          border-radius: 50%;
          padding: .3rem !important; 
          &+div{
             color: #333;
             font-size: 0.8rem;
             margin-left: .5rem;
          }
      }
   }
   &_test{
       display: flex;
       margin-bottom: 1rem;
       &>span{
           display: flex;
           padding: 0 1rem;
           border-right: 1px solid rgb(177, 175, 175);
           font-size: .8rem;
           color: rgb(182, 182, 182);
           cursor: pointer;
           &:hover{
                color: #007fff;
           }
           &:not(:nth-of-type(1)){
               border: none;
           }
           &:nth-of-type(1){
            padding-left: 0;
           }
       }
   }
   &_btn{
      &>button{
         width: 100%;
         background: #007fff;
         padding: .5rem 0;
         color: #f2f3f8;
         border-radius: 5px;
      }
   }
   .cellitem{
      &>div:nth-of-type(1){
          padding: .5rem;
          background: #f2f3f8;
          border: 1px solid #fff;
          border-radius: 5px;
          &:focus-within{
              border: 1px solid #007fff;
          }
          input{
              outline-style: none;
              background: transparent;
              border: none;
              font-size: .9rem;
              color: #333;
          }
          &.error{
               background:rgba(237, 110, 110, 0.299); 
          }
          &+div{
              height: 1.5rem;
              line-height: 1.4rem;
              color: rgb(237, 110, 110);
              font-size: .8rem;
              padding: .1rem 0;
              transform: translateX(30px);
              opacity: 0;
              transition: all .2s ease-in 0s;
              &.active{
                 transform: translateX(0);
                 opacity: 1;
              }
          }
      } 
   }
 }
}
</style>